@CHARSET "UTF-8";

body {
	font-family: Verdana, Geneva, sans-serif;
	background-color: #EDEDED;
}

header,nav,section,footer,aside {
	display: block;
	margin: 5px 5px 5px 5px;
}

header {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

nav,section,footer {
	float: left;
}

section {
	width: 100%;
	padding-left: 20px;
}

article {
	display: block;
	width: 100%;
	clear: both;
}

nav {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	clear: both;
}

nav ul {
	width: 100%;
}

nav li {
	display: block;
	float: left;
	padding-left: 32px;
	padding-right: 32px;
}

aside {
	width: 10%;
	float: right;
}
canvas {
	min-height: 50px;
	max-height: 136px;
	background-color: gray;
	min-width: 800px;
	float: left;
}

footer{
	clear: both;
	vertical-align: bottom;
	margin-top: 50px;
	background-color: #4388CC;
	border: 6px;
	border-color: #1B3280;
	color: white;
	width: 94%;
	padding: 30px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-khtml-border-radius: 10px;
	border-radius: 10px;
}

footer div{
	display: block;
	float: left;
	margin-left: 50px;
}

hr{
	margin-top: 40px;
	height: 10px;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	background-color: #1B3280;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-khtml-border-radius: 10px;
	border-radius: 10px;
}

.titulo{
	width: 1159px;
	height: 152px;
	background-image: url("titulo.png");
	background-repeat: no-repeat;
	margin-left: auto;
	margin-right: auto;
}

.canal {
	width: 965px;
	float: left;
	clear: both;
	overflow: auto;
	padding: 5px;
}

.canalesWrapper {
	width: 1000px;
	overflow-x: auto;
}

.control {
	width: 164px;
	height: 136px;
	background-image: url("control.png");
	background-repeat: no-repeat;
	float: left;
	position: relative;
}

.numeroCanal{
	background-image: url("control.png");
	background-repeat: no-repeat;
	background-image: url("numeroCanal.png");
	position: absolute;
	width: 44px;
	height: 41px;
	text-align: center;
	padding-top: 10px;
}

/*Controles*/
.reproducir,.pausar,.parar, .activo {
	background-repeat: no-repeat;
	background-position: center center;
	position: absolute;
	width: 30px;
	height: 30px;
	display: block;
	clear: none;
	border-style: groove;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-khtml-border-radius: 10px;
	border-radius: 10px;
	cursor: pointer;
}

.reproducir:hover,.pausar:hover,.parar:hover {
	background-color: #B82500;
}

.reproducir {
	background-image: url("reproducir.png");
	top: 45px;
	left: 115px;
}

.pausar {
	background-image: url("pausar.png");
	top: 15px;
	left: 85px;
}

.parar {
	background-image: url("parar.png");
	top: 15px;
	left: 50px;
}

.volumen,.ganancia{
	width: 100px;
	position: absolute;
	left: 10px;
}
.volumen{
	top: 53px;
}
.ganancia{
	top: 75px;
}

.activo{
	text-align: justify;
	width: 60px;
	border: 0px;
	top: 100px;
	left: 50px;
	font-size: x-small;
}

.mensaje {
	width: 270px;
	height: 57px;
	background-image: url("mensaje.png");
	background-repeat: no-repeat;
	text-align: center;
	padding-top: 20px;
	position: relative;
	top: 10px;
	color: black;
	font-weight: normal;
}

.cargaArchivo,.descargaArchivo {
	width: 278px;
	height: 212px;
	background-repeat: no-repeat;
	padding-left: 5px;
	padding-right: 5px;
	color: white;
	font-weight: bolder;
	display: block;
	clear: none;
	white-space: normal;
}

.cargaArchivo {
	background-image: url("mensajeAzul.png");
	float: left;
}

.descargaArchivo {
	background-image: url("mensajeRojo.png");
	float: right;
}

.controlesArchivoWrapper {
	white-space: nowrap;
	overflow-x: auto;
	width: 98%;
}
